<template>
    <div>
        <van-tabbar v-model="active">
            <van-tabbar-item name="home" icon="graphic">商户管理</van-tabbar-item>
            <van-tabbar-item name="search" icon="manager">社长收入</van-tabbar-item>
            <van-tabbar-item name="friends" icon="gold-coin">诚意金</van-tabbar-item>
        </van-tabbar>
        <!-- 商户管理 -->
        <div class="content" v-if="active == 'home'">
            <div>
                <div class="s-card" v-if="agent.roledec">
                    <div class="s-card-text">{{ agent.roledec + "：" + agent.phone }}</div>
                </div>
                <div class="btn4" @click="reset">退出登录</div>
            </div>

            <div class="card1" v-for="(item, index) in list" :key="index">

                <div class="card1-title">商户信息</div>

                <div style="display: flex;justify-content: space-around;">
                    <div class="card1-text">商户名称：{{ item.name }}</div>
                    <div class="card1-text">手机号：{{ item.phone }}</div>
                </div>
                <div style="display: flex;justify-content: space-around;">

                    <div class="card1-text">类型：{{ item.roledec }}</div>
                    <div class="card1-text" style="display: flex;">
                        <div>分红开关：
                        </div>
                        <van-switch v-model="item.isOwnership" active-color="#ee0a24" inactive-color="#dcdee0"
                            @input="change(item)" />
                    </div>
                </div>
                <div style="display: flex;justify-content: space-around;">

                    <div class="card1-text">店铺名称：{{ item.storename }}</div>
                    <div class="card1-text">
                        代金券金额：<span v-if="item.voucher" style="color: red">{{ item.voucher }}元</span>
                    </div>
                </div>
                <div style="display: flex;justify-content: space-around;">

                    <div class="card1-text">新增人数：<span style="color: red;">{{ item.userNumber + '人' }}</span></div>
                    <div class="card1-text">会员人数：<span style="color: red;">{{ item.superNumber + '人' }}</span></div>
                </div>

                <div class="card1-text">注册时间：{{ item.time }}</div>
                <div style="display: flex;justify-content: space-around;" v-if="item.dec">
                    <div class="card1-text" style="color:red">备注：{{ item.dec }}</div>
                </div>
                <div class="btn">
                    <div class="btn1" @click="btn4(item)">重置密码</div>
                    <div class="btn1" @click="btn3(item)">充值记录</div>
                    <div class="btn2" @click="btn2(item)">发放记录</div>
                </div>
            </div>
            <div class="sao" @click="getUrl">
                <van-loading style="color: #000;" v-if="loadings" size="24px"><span
                        style="color: #000;">拉起扫码中...</span></van-loading>
                <span v-else> 扫一扫</span>
            </div>
            <div class="saos" @click="addMember">
                新增商户
            </div>
        </div>
        <!-- 社长收入 -->
        <div class="content" v-if="active == 'search'">
            <div class="card-top">
                <div style="padding:0 .2rem">
                    <div class="flex">
                        <div class="s-card" style="flex:1" v-if="agent.roledec">
                            <div class="s-card-text" style="margin-left: 0;">{{ agent.roledec + "：" + agent.phone }}</div>
                        </div>
                        <div class="btn4" style="margin-right: 0;" @click="reset">退出登录</div>
                    </div>
                    <div class="flex">
                        <div class="card1-text" style="flex: 1;">总收入为：</div>
                        <div class="card1-text2"><span style="color:red;">{{ type == 1 ? revenue + '元' : type == 2 ?
                            superRevenue + '元' : '' }}</span> </div>
                    </div>
                    <!-- <div class="flex">
                        <div class="card1-text" style="flex: 1;">钱包余额为：</div>
                        <div class="card1-text2"><span style="color:red;">8888元</span> </div>
                    </div> -->
                    <div class="flex1" style="margin-top: .2rem;">
                        <div class="btn6" @click="withJump">申请提现</div>
                        <div class="btn6" @click="btn6">提现记录</div>
                    </div>
                </div>
            </div>

            <div style="position: relative;top: 0;">
                <van-tabs v-model="activeName">
                    <van-tab title="返点收入" name="1">
                        <div class="card-jj">
                            <div class="card1-new" v-for="(item, index) in rebatesList" :key="index">
                                <div class="flex m-top">
                                    <div class="card1-text" style="flex: 1;">返点店铺：</div>
                                    <div class="card1-text2"><span>{{ item.name }}</span> </div>
                                </div>
                                <div class="flex m-top">
                                    <div class="card1-text" style="flex: 1;">返点时间：</div>
                                    <div class="card1-text2"><span>{{ item.time }}</span> </div>
                                </div>
                                <div class="flex m-top">
                                    <div class="card1-text" style="flex: 1;">返点金额</div>
                                    <div class="card1-text2"><span style="color:red;">{{ item.money + '元' }}</span> </div>
                                </div>
                                <div class="flex m-top">
                                    <div class="card1-text" style="flex: 1;">兑换金额：</div>
                                    <div class="card1-text2"><span style="color:red;">{{ item.voucher + '元' }}</span> </div>
                                </div>
                            </div>
                            <div class="norecords" v-if="rebatesList && rebatesList.length == 0">
                                暂无记录
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="会员费分红" name="2">
                        <div class="card-jj">
                            <div class="card1-new" v-for="(item, index) in memberList" :key="index">
                                <div class="flex m-top">
                                    <div class="card1-text" style="flex: 1;">分红店铺：</div>
                                    <div class="card1-text2"><span>{{ item.name }}</span> </div>
                                </div>
                                <div class="flex m-top">
                                    <div class="card1-text" style="flex: 1;">分红时间：</div>
                                    <div class="card1-text2"><span>{{ item.time }}</span> </div>
                                </div>
                                <div class="flex m-top">
                                    <div class="card1-text" style="flex: 1;">分红金额：</div>
                                    <div class="card1-text2"><span style="color:red;">{{ item.money + '元' }}</span> </div>
                                </div>
                                <div class="flex m-top">
                                    <div class="card1-text" style="flex: 1;">增加人数</div>
                                    <div class="card1-text2"><span style="color:red;">{{ item.addUser + '人' }}</span> </div>
                                </div>
                            </div>
                            <div class="norecords" v-if="memberList && memberList.length == 0">
                                暂无记录
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="超市收入" name="3">
                        <div class="norecords" v-if="supermarketList && supermarketList.length == 0">
                            暂无记录
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <!-- 诚意金 -->
        <div class="content" v-if="active == 'friends'">
            <div class="flex">
                <div class="s-card" style="flex:1" v-if="agent.roledec">
                    <div class="s-card-text">{{ agent.roledec + "：" + agent.phone }}</div>
                </div>
                <div class="btn4" @click="reset">退出登录</div>
            </div>
            <div class="card-money" style="position:absolute;left:8%;bottom:.8rem">
                <div class="flex" style="width:90%;margin-left: .1rem;margin-bottom: .2rem;">
                    <div class="card1-title" style="flex: 1;">诚意金</div>
                </div>
                <div class="btn2s" style="font-size: .32rem;" @click="moneyShow = true">
                    了解诚意金
                </div>
                <div class="btn2s" style="margin-left:.1rem;background-color: #7efed3;style=font-size: .32rem;float: right;"
                    @click="moneyShowFn">
                    缴纳诚意金
                </div>
            </div>

        </div>
        <!-- 诚意金弹窗 -->
        <van-dialog v-model="moneyShow" title="" :show-cancel-button="false" :showConfirmButton="false" width="70%">
            <div class="dloTitle"> 了解诚意金</div>
            <div class="dloTtxt">
                1:为了杜绝无诚意的合作，特此设立诚意金。
            </div>
            <div class="dloTtxt">
                2:诚意金1万元，且不得在合作中途退出。该诚意金本金，可在合作期满+1天退还社长。
            </div>
            <div class="dloTtxt">
                3:<span style="color: red"> 不交诚意金的社长，不能增加商户管理，不能扫码赠券。</span> 30天后，将被视为自动放弃，将被系统清零。
            </div>
            <div class="dloBtn" @click="moneyShow = false">返回</div>
        </van-dialog>
    </div>
</template>
  
<script>
import { indexdata, resetPwd, allow, ban, scandata, revenue, dividend, withdraw, login } from "@/api/fulfil.js";
export default {
    name: 'President',
    data() {
        return {
            agent: {},
            store: {},
            ticket: {},
            list: [],
            loadings: false,
            checked: false,
            active: 'home',
            activeShow: 2,
            moneyShow: false,//诚意金
            activeName: 1,
            rebatesList: [],//返点数据
            supermarketList: [],//超市收入
            memberList: [],//会员数据
            revenue: '',//返点总收入
            superRevenue: '',//会员分红总收入
            type: 1,
            isSincerity: '',//1缴纳诚意金
        };
    },
    created() { },
    mounted() {

    },
    activated() {

        let uid = localStorage.getItem("agentids");
        let openid = localStorage.getItem('openid');
        console.log(openid, 'openid');
        if (!uid) {
            this.$Toast("请先登录！");
            this.$router.push({
                path: "/login",
            });
        } else {
            this.getIndex();
            this.getRevenue();
        }

         if (!openid && openid == null) {
             console.log(openid, 'openid');
             this.acquireCode();
         }
    },
    watch: {
        activeName(newvalue, oldvalue) {
            console.log(newvalue, 'newvalue');
            if (newvalue) {
                this.type = newvalue;
                this.getRevenue();
            }
        }
    },
    methods: {
        //静默登录
        acquireCode() {
            const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
            const local = window.location.href;
            if (code == null || code === "") {
                window.location.href =
                    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd7fdd57dae07f2f3" +
                    "&redirect_uri=" +
                    encodeURIComponent(local) +
                    "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
            } else {
                console.log(code, 'code');
                this.logins(code); //把code传给后台获取用户信息
            }
        },
        // 获取用户id
        getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
        logins(code) {
            login({
                phone: '',
                pwd: '',
                agentid: localStorage.getItem('agentids'),
                code: code,
            })
                .then((res) => {
                    console.log(res, 'resopenid');
                    localStorage.setItem('openid', res.data.data.agent.openid);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //提现申请列表
        btn6() {
            localStorage.setItem('cashType', 1);
            this.$router.push({
                path: "/cash",
            });
        },
        //缴纳诚意金
        moneyShowFn() {
            if (this.isSincerity == 1) {
                this.$Toast("您已缴纳诚意金，请勿重复缴纳！");
                return false;
            }
            localStorage.setItem('paytype', 2); //1充值代金券  2充诚意金
            this.$router.push({
                path: "/pay",
            });
        },
        //新增商户
        addMember() {
            if (this.isSincerity != 1) {
                this.$Toast("请先缴纳诚意金");
                return false;
            }
            localStorage.setItem('addstoreType', 1)
            this.$router.push({
                path: "/addstore"
            });
        },
        //退出登录
        reset() {
            localStorage.removeItem("adminid");
            localStorage.removeItem("agentid");
            localStorage.removeItem("agentids");
            localStorage.removeItem("phone");
            localStorage.removeItem("password");
            localStorage.removeItem("role");
            localStorage.removeItem("openid");
            localStorage.removeItem("Notice");
            this.$router.push({
                path: "/login",
            });
        },
        change(item) {
            console.log(item, 'item');
            dividend({
                adminid: localStorage.getItem("agentids"),
                agentid: item.id,
                isOwnership: item.isOwnership ? '1' : '0'
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        if (item.isOwnership) {
                            this.$Toast("该店长成功开启分红！");
                        } else {
                            this.$Toast("该店长成功关闭分红！");
                        }
                        this.getIndex();
                    } else {
                        this.$Toast(res.data.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        btn3(item) {
            this.$router.push({
                path: "/rechange",
                query: { item: item },
            });
        },
        btn4(item) {
            this.resetPwd(item);
        },
        getUrl() {
            if (this.isSincerity != 1) {
                this.$Toast("请先缴纳诚意金");
                return false;
            }
            this.loadings = true;
            let that = this;
            let wechaturl = window.location.href;

            scandata({
                agentid: localStorage.getItem("agentid"),
                url: wechaturl,
            }).then((res) => {
                if (res.data.code == 0) {
                    that.ticket = res.data.data;
                    console.log(wx);
                    wx.config({
                        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出
                        debug: false,
                        appId: that.ticket.appId, // 必填，公众号的唯一标识
                        timestamp: that.ticket.timestamp, // 必填，生成签名的时间戳
                        nonceStr: that.ticket.noncestr, // 必填，生成签名的随机串
                        signature: that.ticket.signature, // 必填，签名
                        jsApiList: ["getLocation", "openLocation", "scanQRCode"], // 必填，需要使用的JS接口列表
                        openTagList: ["getLocation", "openLocation", "scanQRCode"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                    });
                    wx.ready(() => {
                        wx.scanQRCode({
                            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                            success: function (res) {
                                console.log(res, 'res1');
                                window.location.href = res.resultStr;
                            },
                            fail: (err) => {
                                this.$Toast(err);
                                console.log(err, 'err');
                            },
                        });
                    });
                } else {
                    this.$Toast(res.data.msg);
                }

                this.loadings = false;
                console.log("res11111", res);

            });
        },
        //社长收入
        getRevenue() {
            revenue({
                agentid: localStorage.getItem("agentids"),
                type: this.type
            })
                .then((res) => {
                    this.rebatesList = res.data.data.rebatesList;
                    this.memberList = res.data.data.memberList;
                    this.supermarketList = res.data.data.supermarketList ? res.data.data.supermarketList : [];
                    console.log(this.supermarketList, 'this.supermarketList');
                    this.superRevenue = res.data.data.superRevenue;
                    this.revenue = res.data.data.revenue;
                    console.log(this.rebatesList, 'data');
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //禁用
        noAllow(item) {
            ban({
                adminid: localStorage.getItem("agentids"),
                agentid: item.id
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$Toast("该店长账户禁用成功！");
                        this.getIndex();
                    } else {
                        this.$Toast(res.data.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //启用
        Allow(item) {
            allow({
                adminid: localStorage.getItem("agentids"),
                agentid: item.id
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$Toast("该店长账户启用成功！");
                        this.getIndex();
                    } else {
                        this.$Toast(res.data.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //重置密码
        resetPwd(item) {
            resetPwd({
                adminid: localStorage.getItem("agentids"),
                agentid: item.id
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$Toast("该店长密码重置成功！");
                    } else {
                        this.$Toast(res.data.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },

        //申请提现 
        withJump() {
            this.$dialog.confirm({
                title: '温馨提示',
                message: '您确定要提现吗？',
            })
                .then(() => {
                    withdraw({
                        agentid: localStorage.getItem("agentids"),
                    })
                        .then((res) => {
                            if (res.data.code == 0) {
                                this.$Toast("提现申请成功！");
                                this.getIndex();
                            } else {
                                this.$Toast(res.data.msg);
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                })
                .catch(() => {
                    // on cancel
                });
        },
        /* 获取当前页面数据 */
        getIndex() {
            indexdata({
                agentid: localStorage.getItem("agentids"),
                role: localStorage.getItem("role")
            })
                .then((res) => {
                    let list = res.data.data.agents;
                    list.forEach((item, i) => {
                        if (item.isOwnership == 1) {
                            list[i].isOwnership = true;
                        } else {
                            list[i].isOwnership = false;
                        }
                    });
                    this.list = list;

                    this.agent = res.data.data.agent;
                    this.isSincerity = res.data.data.agent.isSincerity;
                    console.log(res);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        btn1(item) {
            localStorage.setItem("adminid", item.id);
            this.$router.push({
                path: "/record1",
            });
        },
        btn2(item) {
            localStorage.setItem("adminid", item.id);
            this.$router.push({
                path: "/record2",
            });
        },
    },
};
</script>
  
<style scoped>
.content {
    position: relative;
    padding-bottom: 2rem;
    overflow: hidden;
    width: 100%;
    height: 85vh;
    background: #e1f7fc;
    /* aliceblue */
}

.card1 {
    overflow: hidden;
    margin: 0.3rem auto 0;
    padding: 0 0.5rem 0.25rem 0.5rem;
    width: 84%;
    background: #fff;
    border-radius: 0.375rem;
}

.card1-title {
    margin-top: 0.2rem;
    font-size: 0.4125rem;
    font-weight: 600;
    color: #000;
}

.flex {
    display: flex;
    width: 100%;
}

::v-deep .van-tabbar-item__icon {
    font-size: .55rem;
}

::v-deep .van-tabbar-item__text {
    font-size: .32rem;
}

.card1-text {
    flex: 1;
    display: inline-block;
    margin: .1rem 0 0 0;
    font-size: 0.3125rem;
    font-weight: 600;
    color: #000;
}

.card1-text2 {
    display: inline-block;
    margin: 0.1rem 0 0 0.2rem;
    font-size: 0.3125rem;
    font-weight: 600;
    color: #000;
}

.card1-text1 {
    margin: 0.25rem 0 0 0.2rem;
    font-size: 0.3125rem;
    font-weight: 600;
    color: #000;
    text-align: center;
}

.btn {
    margin-top: 0.6rem;
    display: flex;
    /* 应用Flex布局 */
    justify-content: space-between;
    /* 控制盒子之间的对齐方式 */
}

.btn1 {
    padding: 0 .3rem;
    height: 0.75rem;
    color: #000;
    width: 25%;
    text-align: center;
    line-height: 0.75rem;
    border-radius: 0.375rem;
    background-color: #3cc9e8;
}

.btn4 {
    margin: 20px 30px 20px 0;
    float: right;
    width: 2rem;
    height: 0.75rem;
    color: #000;
    text-align: center;
    line-height: 0.75rem;
    border-radius: 0.375rem;
    background-color: #ffaa7f;
}

.s-card-text {
    margin: .25rem 0 .25rem .475rem;
    height: 0.75rem;
    line-height: 0.75rem;
    float: left;
    color: #000;
    font-size: 0.45rem;
    font-weight: 600;
}

.btn2 {
    padding: 0 .3rem;
    height: 0.75rem;
    line-height: 0.75rem;
    width: 25%;
    text-align: center;
    color: #000;
    border-radius: 0.375rem;
    background-color: #ffbe4c;
}

.btn-new {
    display: inline-block;
    padding: .1rem .2rem;
    color: #fff;
    border-radius: 0.375rem;
    background-color: #f44;
}

.btn-news {
    display: inline-block;
    padding: .1rem .2rem;
    color: #fff;
    border-radius: 0.375rem;
    background-color: #07c160;
}


.addStore {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    font-size: .4rem;
    text-align: center;
    color: #AD3516;
    background: linear-gradient(180deg, #FFE9C6, #FFD584);
    box-shadow: 0px 3px 8px 0px rgba(150, 51, 20, 0.42);
    line-height: 1rem;
    border-radius: .5rem;
}

.sao {
    position: fixed;
    bottom: 1.3rem;
    left: 10%;
    width: 40%;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.35rem;
    border-radius: 0.5rem;
    background-color: #ffbe4c;
    font-weight: 600;
}

.saos {
    position: fixed;
    bottom: 1.3rem;
    right: 10%;
    width: 40%;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.35rem;
    border-radius: 0.5rem;
    background-color: #ffbe4c;
    font-weight: 600;
}

.van-switch {
    font-size: 0.45406rem;
}

.card-money {
    overflow: hidden;
    margin: 0.3rem auto 0;
    padding: 0.25rem 0.5rem;
    width: 84%;
    background: #fff;
    border-radius: 0.375rem;
    box-sizing: border-box;
}

.van-dialog {
    padding: 0 .5rem;
    box-sizing: border-box;
}

.dloTitle {
    text-align: center;
    font-size: .4rem;
    font-weight: 600;
    margin-top: .4rem;
}

.dloTtxt {
    margin-top: .2rem;
    font-size: .35rem;
}

.dloBtn {
    width: 50%;
    height: .8rem;
    background: red;
    color: #fff;
    border-radius: .5rem;
    text-align: center;
    line-height: .8rem;
    margin: .5rem auto;
}

::v-deep .van-tabs__wrap {
    width: 100%;
}

::v-deep.van-tabs {
    height: 1rem;
}

::v-deep.van-tabs--line {
    height: 0;
}

::v-deep .van-tabs__nav {
    background-color: #e1f7fc;
}

::v-deep .van-tabs__nav {
    background-color: #e1f7fc;
}

::v-deep .van-tab {
    font-size: 0.377rem;
}

.tips {
    font-weight: 600;
    font-size: .35rem;
    height: .6rem;
    line-height: .6rem;
}

.money-btn {
    margin-left: .3rem;
    padding: .1rem .3rem;
    text-align: center;
    color: #000;
    background-color: #FFD584;
    border-radius: .5rem;
}

.card-top {
    margin: .2rem auto 0;
    padding: .2rem 0;
    width: 80%;
    padding-right: .2rem;
    border-radius: .4rem;
    background-color: #fff;
}

.btn6 {
    margin-right: .1rem;
    display: inline-block;
    padding: 0 .3rem;
    height: 0.75rem;
    width: 2rem;
    line-height: 0.75rem;
    text-align: center;
    color: #000;
    border-radius: 0.375rem;
    background-color: #7efed3;
}

.btn2s {
    min-width: 45%;
    display: inline-block;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #000;
    border-radius: 0.5rem;
    background-color: #ffbe4c;
}

.card-jj {
    height: 12rem;
    overflow-y: auto;
}

.card1-new {
    margin: .2rem auto;
    overflow: hidden;
    width: 76%;
    padding: .2rem .3rem;
    border-radius: .4rem;
    background-color: #fff;
}

.m-top {
    margin-top: .1rem;
}

.norecords {
    margin-top: 2rem;
    color: #ffbe4c;
    font-size: .5rem;
    text-align: center;
}
</style>